<template>
  <div class="mine">
    <div class="scroll">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <div class="conent_wrap">
          <div class="info">
            <!-- <div class="quick_login" @click="quick_login">
              <p>退出</p>
            </div> -->
            <div class="top">
              <div class="top_left">
                <div class="author">
                  <img
                    src="@/assets/avatar.png"
                    v-if="userInfo.headUrl ? false : true"
                    style="width: 100%; height: 100%"
                  />
                  <img
                    :src="userInfo.headUrl"
                    v-else
                    style="width: 100%; height: 100%"
                  />
                </div>
                <div class="mobileMd5">{{ userInfo.mobile }}</div>
              </div>
            </div>
            <!-- <div class="user_title">{{ userInfo.name }},你好！</div> -->
            <div class="user_title">家长,你好！</div>
            <div class="user_login_time">上次登录时间：{{ userInfo.loginTime }}</div>
            <!-- <div class="nav">
              <div class="nav_left">
                <div>总资产(元)</div>
                <div class="yincang" @click="changeShow">
                  <img :src="pwd_status ? show_pwd : close_pwd" alt="" />
                </div>
              </div>
              <div class="nav_right">
                {{
                  pwd_status
                    ? userInfo.money
                      ? '¥  ' + userInfo.money
                      : '¥  ' + 0
                    : '******'
                }}
              </div>
            </div> -->
          </div>
          <div class="info_list">
            <div
              class="list_item"
              v-for="item in navList"
              :key="item.title"
              @click="_route(item.type)"
            >
              <div class="left">
                <div class="icon_left">
                  <img
                    :src="item.icon"
                    style="width: 100%; height: 100%"
                    alt=""
                  />
                </div>
                <p class="title">{{ item.title }}</p>
              </div>
              <div class="icon" v-html="'&#xe635;'"></div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { PullRefresh, Dialog } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      isLoading: false,
      userInfo: {},
      pwd_status: false,
      show_pwd: require('@/assets/show_pwd.png'),
      close_pwd: require('@/assets/close_pwd.png'),
      navList: [
        {
          title: '我的课程',
          icon: require('@/assets/my_assets.png'),
          type: 1,
        },
        // {
        //   title: '课程列表',
        //   icon: require('@/assets/my_assets.png'),
        //   type: 2,
        // },
         {
          title: '积分商城',
          icon: require('@/assets/my_assets.png'),
          type: 2,
        },
        {
          title: '课堂评价',
          icon: require('@/assets/my_assets.png'),
          type: 3,
        },
      ],
    }
  },
  components: {
    [PullRefresh.name]: PullRefresh,
  },
  created() {
    this.getData()
  },
  methods: {
    ...mapMutations(['SAVE_TABBAR_STATUS']),
    quick_login() {
      Dialog.confirm({
        title: '',
        showCancelButton: true,
        confirmButtonColor: '#FF5507',
        message: '您确定要退出吗?',
      })
        .then(() => {
          localStorage.removeItem('px_token')
          localStorage.removeItem('px_user_openid')
          this.SAVE_TABBAR_STATUS(0)
          this.$router.push({ name: 'home' })
        })
        .catch(() => {
          console.log('catch')
        })
    },
    changeShow() {
      this.pwd_status = !this.pwd_status
    },
    authType() {
      this.$router.push({ name: 'auth-type' })
    },
    async _route(e) {
      let name = ''
      let params = {}
      let studentList = []
      // 课堂评价和积分商场都需要先获取学生列表
      if (e === 3 || e === 2) {
        studentList = await this.getUserStudent()
        studentList = studentList.data.result
      }
      if ((e === 3 || e === 2) && !studentList.length) return this.$toast('暂未查询到相关信息');
      switch (e) {
        case 1:
          name = 'assets'
          break
        case 2:
          // 积分商场：如果学生数量大于1，先跳转到学生选择页面
          if (studentList.length > 1) {
            name = 'selectStudent'
            params = {infos: studentList, from: 'pointsMall'}
          } else {
            name = 'pointsMall'
            params = {studentInfo: studentList[0]}
          }
          break
        case 3:
          if (studentList.length > 1) {
            name = 'selectStudent'
            params = {infos: studentList, from: 'evaluateList'}
          } else {
            name = 'evaluateList'
            params = {info: studentList[0]?.id}
          }
          break
      }
      if (name == 'evaluateList') {
        this.$router.push({ path: '/'+name, query: params })
        return
      }
      this.$router.push({ name: name, params })
    },
    onRefresh() {
      this.getData()
    },
    async getUserStudent() {
      return await this.$http.getUserStudent()
    },
    getData() {
      this.$http.getUserInfo().then(res => {
        this.isLoading = false
        res.data.result.mobile = this.mobileMD(res.data.result.mobile, 3, 5)
        this.userInfo = res.data.result
        console.log(res, 'info')
      }).catch(err => {
        this.isLoading = false
      })
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       * */
      number = (number + '').replace(/[^0-9+-Ee.]/g, '')
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 2 : Math.abs(decimals),
        sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep,
        dec = typeof dec_point === 'undefined' ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec)
          return '' + Math.ceil(n * k) / k
        }

      s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
      var re = /(-?\d+)(\d{3})/
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, '$1' + sep + '$2')
      }

      if ((s[1] || '').length < prec) {
        s[1] = s[1] || ''
        s[1] += new Array(prec - s[1].length + 1).join('0')
      }
      return s.join(dec)
    },
    // 加密处理
    mobileMD(str, start, end) {
      str = str.split('')
      if (str.length <= 2) {
        str.splice(1, 1, '*')
        return str.join('')
      } else {
        let s = ''
        for (let i = 0; i < end - 1; i++) {
          s += '*'
        }
        str.splice(start, end - 1, s)
        return str.join('')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  color: #333;
  .scroll {
    width: 100%;
    height: 100%;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    .van-pull-refresh {
      height: 100%;
      overflow: auto;
      .conent_wrap {
        min-height: 100%;
        width: 100%;
        background: #f6f8fc;
        padding-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .info {
          height: 160px;
          background: url('../assets/mine_bg.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          padding: 20px;
          box-sizing: border-box;
          position: relative;
          .quick_login {
            position: absolute;
            top: 50px;
            right: 20px;
            color: #fff;
            font-size: 14px;
          }
          .top {
            height: 42px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .top_left {
              display: flex;
              align-items: center;
              .author {
                width: 32px;
                height: 30px;
                margin-right: 10px;
                overflow: hidden;
                border-radius: 50%;
                color: #e1e9f5;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                span {
                  font-size: 22px;
                }
              }
              .mobileMd5 {
                display: flex;
                align-items: center;
                color: #fff;
                font-size: 14px;
              }
            }
          }
          .user_title {
            color: #fff;
            font-size: 20px;
            font-weight: 500;
            margin-top: 16px;
            margin-bottom: 15px;
          }
          .user_login_time {
            color: #fff;
            opacity: 0.5;
            font-size: 13px;
            letter-spacing: 0;
            font-weight: 400;
          }
          .nav {
            width: calc(100% - 40px);
            height: 132px;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.08);
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: -85px;
            margin: auto;
            font-size: 16px;
            background: #ffffff;
            color: #333;
            .nav_left {
              width: 100%;
              height: 48px;
              background: #f6f8fc;
              padding: 0px 20px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .yincang {
                width: 16px;
                height: 13px;
              }
            }
            .nav_right {
              width: 100%;
              height: calc(100% - 48px);
              padding-left: 20px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              color: #09122b;
              font-weight: 600;
              font-size: 22px;
            }
          }
        }
        .info_list {
          flex: 1;
          margin-top: 15px;
          margin-bottom: 20px;
          .icon {
            font-size: 14px;
            color: #666666;
          }
          .icon_left {
            width: 28px;
            height: 28px;
          }
          .list_item {
            width: 100%;
            height: 50px;
            background: #fff;
            padding: 0px 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #f6f8fc;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              display: flex;
              align-items: center;
              .title {
                margin-left: 6px;
              }
              .icon {
                font-size: 18px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
}
</style>
